<template>
  <Row class="page4">
    <Col span="24">
      <div class="grid-content">
        <span class='title'><span class="title-gradient">病患管理</span></span>
        <span class="angle1"></span>
        <span class="angle2"></span>
        <span class="angle3"></span>
        <span class="angle4"></span>

        <div class="table-container">
          <el-button type="primary" icon="el-icon-download" @click="exportData"> 导出患者信息</el-button>
          <el-table :data="pagedData"
                    class="patient-table"
                    border
                    :cell-style="{background: '#03044a', borderColor: '#6EDDF1'}"
                    :row-style="{background: '#03044a', borderColor: '#6EDDF1'}"
                    :header-cell-style="{background: '#03044a', borderColor: '#6EDDF1'}"
          >
            <el-table-column prop="id" label="ID" width="50"></el-table-column>
            <el-table-column prop="patient_id" label="患者ID"></el-table-column>
            <el-table-column prop="patient_name" label="患者姓名"></el-table-column>
            <el-table-column prop="patient_sex" label="患者性别"></el-table-column>
            <el-table-column prop="patient_age" label="患者年龄"></el-table-column>
            <el-table-column prop="patient_height" label="患者身高"></el-table-column>
            <el-table-column prop="patient_weight" label="患者体重"></el-table-column>
            <el-table-column prop="patient_time" label="患病时间"></el-table-column>
            <el-table-column prop="patient_department" label="挂号科室"></el-table-column>
            <el-table-column prop="patient_type" label="疾病类型"></el-table-column>
            <el-table-column prop="patient_hospital" label="挂号医院"></el-table-column>
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button
                    size="mini"
                    @click="handleEdit(scope.row)"
                >编辑
                </el-button>
                <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              style="margin-top: 10px; margin-right: 0px"
              background
              layout="total, prev, pager, next"
              :total="tableData.length"
              :page-size="pageSize"
              @current-change="handlePageChange"
          />
        </div>

      </div>

    </Col>

    <!-- 编辑弹框 -->
    <el-dialog
        title="编辑患者信息"
        :visible.sync="dialogVisible"
        width="40%"
    >
      <el-form :model="editForm" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="ID">
              <el-input v-model="editForm.id" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="患者ID">
              <el-input v-model="editForm.patient_id" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="患者姓名">
              <el-input v-model="editForm.patient_name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="患者性别">
              <el-input v-model="editForm.patient_sex"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="患者年龄">
              <el-input v-model="editForm.patient_age" type="number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="患者身高">
              <el-input v-model="editForm.patient_height" type="number"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="患者体重">
              <el-input v-model="editForm.patient_weight" type="number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="就诊时间">
              <el-date-picker
                  style="width: 100%"
                  v-model="editForm.patient_time"
                  type="datetime"
                  placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="挂号科室">
              <el-input v-model="editForm.patient_department"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="疾病类型">
              <el-input v-model="editForm.patient_type"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="挂号医院">
              <el-input v-model="editForm.patient_hospital"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </span>
    </el-dialog>
  </Row>
</template>

<script>
import {deletePatientInfo, editPatientInfo, getPatientList} from "@/api/patient";

export default {
  name: "page4",
  components: {},
  data() {
    return {
      tableData: [],
      pageSize: 10, // 每页显示的条目数
      currentPage: 1, // 当前页码
      dialogVisible: false,
      editForm: {
        id: null,
        patient_id: '',
        patient_name: '',
        patient_sex: '',
        patient_age: null,
        patient_height: null,
        patient_weight: null,
        patient_time: null,
        patient_department: '',
        patient_type: '',
        patient_hospital: ''
      },
      currentRow: null
    }
  },
  methods: {
    getData() {
      getPatientList().then(res => {
        this.tableData = res.data
      })
    },
    handlePageChange(newPage) {
      this.currentPage = newPage;
    },
    handleEdit(row) {
      this.currentRow = row;
      this.editForm = { ...row };
      this.dialogVisible = true;
    },
    handleSave() {
      // 在这里添加保存逻辑，例如发送请求到后端更新数据

      const id = this.currentRow.id;
      const data = {
        patient_name: this.editForm.patient_name,
        patient_sex: this.editForm.patient_sex,
        patient_age: this.editForm.patient_age,
        patient_height: this.editForm.patient_height,
        patient_weight: this.editForm.patient_weight,
        patient_time: this.editForm.patient_time,
        patient_department: this.editForm.patient_department,
        patient_type: this.editForm.patient_type,
        patient_hospital: this.editForm.patient_hospital
      };
      editPatientInfo(id, data).then(res=> {
        if (res.code == 200) {
          this.$message({
            message: res.message,
            type: "success",
          });
        }
        this.getData()
      })

      this.dialogVisible = false;
    },

    handleDelete(row) {
      const patientId = row.id;

      this.$confirm('确定要删除这条记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deletePatientInfo(patientId).then((res) => {
              if(res.code==200) {
                this.$message({
                  message: res.message,
                  type: "success",
                });
                this.getData()
                this.currentPage = 1
              }
            })
            .catch(error => {
              this.$message({
                message: error,
                type: "danger",
              });
            });
      }).catch(() => {
        console.log('删除操作已取消');
      });
    },

    exportData() {
      window.open('http://localhost:8088/patient/export_patients', '_blank');
    }
  },
  computed: {
    pagedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.tableData.slice(start, end);
    }
  },
  mounted() {
    this.getData()
  }
}
</script>

<style lang="less">

/* 设置表格背景色 */
.el-table th, .el-table td {
  background-color: #03044a;
  color: #6EDDF1;
}


.page4 {
  height: 100%;
  width: 100%;
  padding: 14px 20px 20px;
  background: #03044A;
  overflow: hidden;

  .ivu-col {
    height: 100%;


    &.main {
      padding: 0 20px;
      grid-template-rows: auto 33.33%;
    }

    .grid-content {
      border: 1px solid #0D2451;
      position: relative;
      height: calc(~"100% - 30px");

      .table-container {
        height: 100%;
        padding: 30px;
        overflow: auto;

        .patient-table {
          margin-top: 10px;
          border-color: #6EDDF1;
        }
      }

    }
  }
}
</style>
